<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="我的订单"
             :white="false">
    </top-bar>
    <page-content class="er-order">
      <div class="er-container">
        <div class="bz-header">
          <div class="bz-je">{{totalPrice}}</div>
          <div class="er-intro">{{state == '3' ? '' : '持有'}}{{type(state)}}订单（{{total}}笔）</div>
        </div>
        <van-tabs v-model="active"
                  @click="tabChange"
                  class="er-tabs"
                  color="#585DF9"
                  line-width="50px"
                  title-active-color=" #3D3E54"
                  title-inactive-color="#7A7886">
          <van-tab name="0" title="待支付"></van-tab>
          <van-tab name="2" title="生效中"></van-tab>
          <van-tab name="3" title="已终止"></van-tab>
        </van-tabs>
        <div class="refresh-box">
            <van-pull-refresh
            class="refresh"
            v-model="isLoading"
            success-text="刷新成功"
            @refresh="onRefresh"
          >
            <!-- 无数据 -->
            <page-empty v-if="!list.length"></page-empty>
            <div class="bz-cbox" v-for="(item, index) in list" :key="index">
              <!-- 有数据 -->
              <div class="bz-con">
                <div class="bz-name">
                  <span class="bz-zc">{{item.name}}</span>
                  <span class="bz-color">{{status(item.state)}}</span>
                  <!-- <span class="bz-color"
                        id="er-sx">生效中</span>
                  <span class="bz-color"
                        id="er-zz">已终止</span> -->
                </div>
                <p class="bz-bz">数量：{{item.number}}</p>
                <div class="bz-count">
                  <span>产品售价</span>
                  <span class="bz-time">产品周期</span>
                </div>
                <div class="bz-counts">
                  <span class="er-price">{{item.unit_price}} CNY</span>
                  <span class="er-time">{{item.property_right_cycle}}天</span>
                </div>
                <p class="er-total">总价：¥{{item.price}} 实付款：¥{{item.price}}</p>
                <div class="er-date">
                  <span class="er-yxrq">有效期至： {{+(item.validity_end_time+'000') | formatDate('yyyy-MM-dd')}}</span>
                  <van-button round
                              type="info"
                              class="er-detail"
                              @click="goDetail(item)">{{item.state == 0 ? '付款' : '详情'}}</van-button>
                </div>
              </div>
            </div>
          </van-pull-refresh>
        </div>
      </div>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import PageEmpty from '@/components/Empty';
import service from '@/utils/request';

export default {
  data () {
    return {
      isLoading: false,
      list: [],
      total: 0,
      totalPrice: 0,
      state: 0,// 订单状态（0-待支付订单，2-生效订单，3-终止订单）
      active: 0, 
    }
  },
  components: {
    TopBar,
    PageView,
    PageContent,
    PageEmpty
  },
  mounted () {
    // this.getData();
  },
  activated(){
    this.getData();
  },
  methods: {
    tabChange(state){
      this.state = state;
      this.getData();
    },
    type(state){
      let type = {
        "0": '未生效',
        "2": '生效',
        "3": '已终止'
      }
      return type[state]
    },
    status(state){
      switch(state){
        // -1-已取消 0-待支付 1-已支付（待审核） 2-生效中 3-已终止
        case -1:
          return '已取消';
        case 0:
          return '待支付';
        case 1:
          return '已支付（待审核）';
        case 2:
          return '生效中';
        case 3:
          return '已终止';
      }
    },
    onRefresh(){
      this.isLoading = true;
      this.getData(true).then(e=>{
        this.isLoading = false;
      })
    },
    goDetail (item) {
      this.$router.push({ 
        path: `/product/order/${item.order_no}`,
      })
    },
    getData(hideloading){
      return service.post('/apiOrder.do', {
        page: 1,
        limit: 50,
        state: this.state
      }, {
        hideloading
      }).then(res=>{
        this.list = res.data.rows;
        this.total = res.data.total;
        this.totalPrice = res.data.totalPrice;
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.er-container {
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow: hidden;
  .bz-header {
    height: 235px;
    background: #fff;
    overflow: hidden;
    .d-tit {
      width: 100%;
      text-align: center;
      position: relative;
      margin-top: 39px;
      // padding: 0 20px;
      .p-back {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        position: absolute;
        left: 20px;
        top: 3px;
      }
      .p-center {
        width: auto;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #000;
        line-height: 28px;
        margin: 0 auto;
        vertical-align: middle;
        display: inline-block;
      }
    }
    .bz-je {
      text-align: center;
      height: 56px;
      font-size: 40px;
      font-weight: 600;
      color: #000;
      line-height: 56px;
      margin-top: 100px;
    }
    .er-intro {
      text-align: center;
      font-size: 14px;
      line-height: 14px;
      font-weight: 400;
      color: #3d3e54;
    }
    .er-tabs {
      .van-tab {
        font-size: 14px;
      }
    }
  }
  .refresh-box{
    flex: 1;
    overflow: auto;
    .refresh{
      min-height: 100%;
    }
    .bz-cbox:last-of-type{
      margin-bottom: 30px;
    }
  }
  .bz-cbox {
    flex: 1;
    // padding: 0 20px;
    margin-top: 8px;
    .bz-con {
      background: #ffffff;
      overflow: hidden;
      padding: 0 15px 10px;
      margin-bottom: 8px;
      .bz-name {
        line-height: 20px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        .bz-zc {
          font-size: 14px;
          font-weight: 500;
          color: #3d3e54;
        }
        .bz-color {    
          padding: 0 5px;
          height: 19px;
          background: #ff8445;
          border-radius: 10px;
          font-size: 10px;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          white-space: nowrap;
        }
        .bz-red {
          color: #e31010;
        }
        .bz-green {
          color: #5fd400;
        }
      }
      .bz-bz {
        height: 17px;
        font-size: 10px;
        font-weight: 500;
        color: #3d3e54;
        margin-bottom: 10px;
      }
      .bz-count {
        height: 18px;
        font-size: 10px;
        font-weight: 400;
        color: #7a7886;
        line-height: 18px;
        display: flex;
        justify-content: space-between;
      }
      .bz-counts {
        display: flex;
        justify-content: space-between;
        height: 17px;
        font-size: 12px;
        font-weight: 500;
        margin-top: 7px;
        margin-bottom: 6px;
        .er-price {
          color: #585df9;
        }
        .er-time {
          color: #3d3e54;
        }
      }
      .er-total {
        height: 14px;
        font-size: 10px;
        font-weight: 400;
        color: #7a7886;
        line-height: 14px;
        text-align: right;
        margin-bottom: 10px;
      }
      .er-date {
        display: flex;
        justify-content: space-between;
        height: 29px;
        line-height: 29px;
        .er-yxrq {
          font-size: 10px;
          font-weight: 400;
          color: #7a7886;
        }
        .er-detail {
          width: 74px;
          height: 29px;
          background: #585df9;
          border-radius: 15px;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
        }
      }
      #er-sx {
        background: #6ded06;
      }
      #er-zz {
        background: #e53434;
      }
    }
    .er-none {
      height: auto;
      padding: 0 20px;
      margin-top: 30%;
      .er-imgn {
        width: 337px;
        height: 193px;
      }
      .er-np {
        height: 22px;
        font-size: 16px;
        margin-top: 10px;
        font-weight: 600;
        color: #7a7886;
        line-height: 22px;
        text-align: center;
      }
    }
  }
}
</style>
